<script lang="ts" setup>
import { ElButton, ElInput, ElPagination, ElTable, ElTableColumn } from 'element-plus'
import SysLayout from '@/components/SysLayout.vue'
import { computed } from 'vue'
import { useWindowSize } from '@vueuse/core'
import { useDictDataStore, useDictStore } from './store'
import { Dict } from './data'
import AddOrUpdate from './components/AddOrUpdate.vue'
import DictConfig from './components/DictConfig.vue'

const { height } = useWindowSize()

const tableHeight = computed(() => height.value - 337)

const dict = useDictStore()

const dictData = useDictDataStore()

dict.onGet()
</script>

<template>
  <SysLayout>
    <template #filter>
      <ElInput v-model="dict.search.dictName" placeholder="字典名称" />
      <ElInput v-model="dict.search.dictType" placeholder="字典类型" />
      <ElButton type="primary" icon="Search" @click="dict.onSearch()">查询</ElButton>
      <ElButton icon="RefreshRight" @click="dict.onResetSearch()">重置</ElButton>
    </template>
    <template #action>
      <ElButton type="primary" icon="Plus" @click="dict.onStartUpdate()">新增字典</ElButton>
      <ElButton icon="Delete" type="danger" plain :disabled="dict.selection.length === 0" @click="dict.onBatchDelete()">
        批量删除
      </ElButton>
    </template>
    <template #default>
      <ElTable
        border
        :data="dict.records"
        :height="tableHeight"
        show-overflow-tooltip
        @selection-change="dict.selection = $event"
      >
        <ElTableColumn align="center" type="selection" width="38" />
        <ElTableColumn align="center" label="字典类型" prop="dictType" />
        <ElTableColumn align="center" label="字典名称" prop="dictName" />
        <ElTableColumn align="center" label="描述" prop="description" />
        <ElTableColumn align="center" label="更新时间" prop="updatedAt" />
        <ElTableColumn align="center" label="创建时间" prop="createdAt" />
        <ElTableColumn align="center" label="操作" fixed="right" #="{ row }" :width="152">
          <ElButton type="primary" link @click="dictData.onStartConfig(row as Dict)">配置</ElButton>
          <ElButton type="primary" link @click="dict.onStartUpdate(row as Dict)">修改</ElButton>
          <ElButton type="danger" link @click="dict.onDelete(row as Dict)">删除</ElButton>
        </ElTableColumn>
      </ElTable>
      <ElPagination
        v-model:current-page="dict.current"
        layout="prev, pager, next, jumper"
        :total="dict.total"
        @current-change="dict.onGet()"
      />
    </template>
  </SysLayout>
  <AddOrUpdate />
  <DictConfig />
</template>
